<template>
  <div class="navbar">
    <div class="left-side">
      <ASpace>
        <img alt="logo" :src="logo" class="logo" />
        <a-typography-title :style="{ margin: 0, fontSize: '18px' }" :heading="5">
          乐瑾科技生产管理系统
        </a-typography-title>
        <!-- <icon-menu-fold
          v-if="!topMenu && appStore.device === 'mobile'"
          style="font-size: 22px; cursor: pointer"
          @click="toggleDrawerMenu"
        /> -->
      </ASpace>
    </div>
    <div class="center-side">
      <Menu v-if="topMenu" />
    </div>
    <ul class="right-side">
      <!-- <li>
        <ATooltip content="搜索">
          <AButton class="nav-btn" type="outline" :shape="'circle'">
            <template #icon>
              <icon-search />
            </template>
          </AButton>
        </ATooltip>
      </li> -->
      <ATooltip content="点击下载" :disabled="isDown">
        <li
          v-if="newVersion"
          class="nav-btn-box"
          style="box-sizing: border-box; padding: 4px; width: 70px"
          @click="downNewVersion"
        >
          <AProgress v-if="isDown" type="circle" :percent="downPercentage" size="mini"> </AProgress>
          <span class="erp-font-size-12 erp-mt-3">{{ newVisionText }}</span>
        </li>
      </ATooltip>
      <Notes></Notes>
      <!-- <li>
        <ATooltip content="消息通知">
          <div class="message-box-trigger">
            <a-badge :count="9" dot>
              <AButton class="nav-btn" type="outline" :shape="'circle'" @click="setPopoverVisible">
                <icon-notification />
              </AButton>
            </a-badge>
          </div>
        </ATooltip>
        <a-popover
        trigger="click"
        :arrow-style="{ display: 'none' }"
        :content-style="{ padding: 0, minWidth: '400px' }"
        content-class="message-popover"
        >
        <div ref="refBtn" class="ref-btn"></div>
        <template #content>
            <message-box />
          </template>
        </a-popover>
      </li> -->
      <li class="nav-btn-box" @click="openCalc">
        <icon-mobile class="nav-btn" />
        <span class="erp-font-size-12 erp-mt-3">计算器</span>
      </li>
      <APopover position="bottom" auto-fit-position>
        <li class="nav-btn-box">
          <icon-phone class="nav-btn" />
          <span class="erp-font-size-12 erp-mt-3">联系客服</span>
        </li>
        <template #content>
          <div class="demo-basic">
            <AEmpty />
          </div>
        </template>
      </APopover>
      <li>
        <ADropdown trigger="click">
          <AAvatar :size="32" :style="{ marginRight: '8px', cursor: 'pointer' }">
            <img v-if="avatar" alt="avatar" :src="avatar" />
            <span>{{ userStore.userName }}</span>
          </AAvatar>
          <template #content>
            <ADoption>
              <ASpace @click="handleEditPW">
                <icon-pen />
                <span>修改密码 </span>
              </ASpace>
            </ADoption>
            <ADoption>
              <ASpace @click="handleLogout">
                <icon-export />
                <span>登出账号 </span>
              </ASpace>
            </ADoption>
          </template>
        </ADropdown>
      </li>
    </ul>
    <editPW v-model:visible="editModal" title="修改密码"></editPW>
  </div>
</template>

<script lang="ts" setup>
import { useAppStore, useUserStore } from '@renderer/store'
import useUser from '@renderer/hooks/user'
import Menu from '@renderer/components/menu/index.vue'
// import MessageBox from '../message-box/index.vue'
import logo from '@renderer/assets/images/logo.jpg'
import editPW from './editPW.vue'
import { decimalRound } from '@renderer/utils/mixins'
import Notes from './notes.vue'

const appStore = useAppStore()
const userStore = useUserStore().localUserInfo
const { logout } = useUser()
const isDown = ref(false) // 是否开始下载
const downPercentage = ref(0) // 下载进度
const avatar = computed(() => {
  return userStore.avatar
})
const topMenu = computed(() => appStore.topMenu && appStore.menu)
const editModal = ref(false)
const newVersion = ref(false) // 是否有新版本
const ipcRenderer = window.electron ? window.electron.ipcRenderer : undefined // 渲染线程的对象
const newVisionText = ref('')

ipcRenderer?.on('update-start', () => {
  console.log('update-start')
  newVisionText.value = '发现新版本'
  newVersion.value = true
})
ipcRenderer?.on('update-error', (_event, value) => {
  console.log('update-error')
  console.error(value)
})

ipcRenderer?.on('update-progress', (_event, progressObj) => {
  // console.log(progressObj)
  downPercentage.value = Number(decimalRound(progressObj.percent / 100))
})
ipcRenderer?.on('update-downloaded', () => {
  console.log('update-downloaded')
  newVisionText.value = '下载完成,点击安装'
  isDown.value = false
})

// const refBtn = ref()
// const setPopoverVisible = () => {
//   const event = new MouseEvent('click', {
//     view: window,
//     bubbles: true,
//     cancelable: true
//   })
//   refBtn.value.dispatchEvent(event)
// }
const handleEditPW = () => {
  editModal.value = true
}
const handleLogout = () => {
  logout()
}
// const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void

const openCalc = () => {
  ipcRenderer?.send('open-calc', 1)
}

const downNewVersion = () => {
  console.log(newVisionText.value)
  if (newVisionText.value == '发现新版本') {
    ipcRenderer?.send('start-down')
    newVisionText.value = '下载中'
    isDown.value = true
  } else if (newVisionText.value == '下载完成,点击安装') {
    ipcRenderer?.send('install-update')
    downPercentage.value = 0
  }
}

onMounted(() => {
  console.log('check-update')
  //检测更新
  ipcRenderer?.send('check-update')
})
</script>

<style scoped lang="less">
.logo {
  width: 40px;
  // height: 40px;
}
.navbar {
  display: flex;
  justify-content: space-between;
  height: 100%;
  background-image: linear-gradient(to right, var(--color-primary-light-3), var(--color-bg-2));
  border-bottom: 1px solid var(--color-border);
}

.left-side {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.center-side {
  flex: 1;
}

.right-side {
  display: flex;
  align-items: center;
  padding-right: 20px;
  list-style: none;
  margin: 0px;
  :deep(.locale-select) {
    border-radius: 20px;
  }
  li {
    display: flex;
    align-items: center;
  }

  a {
    color: var(--color-text-1);
    text-decoration: none;
  }
  .nav-btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #b0b6c1;
    border-radius: 8px;
    width: 60px;
    height: 50px;
    padding: 0px;
    margin-right: 12px;
    cursor: pointer;
    &:hover {
      background-color: rgb(246, 251, 255);
    }
  }
  .nav-btn {
    border-color: rgb(var(--gray-2));
    color: rgb(var(--gray-8));
    font-size: 24px;
  }
  .trigger-btn,
  .ref-btn {
    position: absolute;
    bottom: 14px;
  }
  .trigger-btn {
    margin-left: 14px;
  }
}
</style>

<style lang="less">
.message-popover {
  .arco-popover-content {
    margin-top: 0;
  }
}
</style>
